<template>
  <div v-if="show">
    <el-form label-position="top" size="small">
      <el-form-item :label="$t('fm.config.widget.model')" v-if="data.type != 'td' && data.type != 'col'">
        <el-input clearable v-model="data.model" :disabled="data.type =='grid' || data.type == 'tabs' || data.type == 'report' || data.type == 'divider' || data.type == 'inline'"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.name')" v-if="data.type!='grid' && data.type != 'tabs' && data.type != 'report' && data.type != 'inline' && data.type != 'td' && data.type != 'col'">
        <el-input clearable v-model="data.name"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.buttonName')" v-if="Object.keys(data.options).indexOf('buttonName')>=0">
        <el-input clearable v-model="data.options.buttonName"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.linkName')" v-if="Object.keys(data.options).indexOf('linkName')>=0">
        <el-input clearable v-model="data.options.linkName"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.width')" v-if="Object.keys(data.options).indexOf('width')>=0">
        <el-input clearable v-model="data.options.width"></el-input>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.height')" v-if="Object.keys(data.options).indexOf('height')>=0">
        <el-input clearable v-model="data.options.height"></el-input>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.size')" v-if="Object.keys(data.options).indexOf('size')>=0">
        {{$t('fm.config.widget.width')}} <el-input clearable style="width: 90px;" type="number" v-model.number="data.options.size.width"></el-input>
        {{$t('fm.config.widget.height')}} <el-input clearable style="width: 90px;" type="number" v-model.number="data.options.size.height"></el-input>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.labelWidth')" v-if="Object.keys(data.options).indexOf('labelWidth')>=0 ">
        <el-checkbox v-model="data.options.isLabelWidth" style="margin-right: 5px;">{{$t('fm.config.widget.custom')}}</el-checkbox>
        <el-input-number v-model="data.options.labelWidth" :disabled="!data.options.isLabelWidth" :min="0" :max="99999" :step="10"></el-input-number>
      </el-form-item>

      <!--hideLabel-->
      <el-form-item :label="$t('fm.config.widget.hideLabel')" v-if="data.type !='grid' && data.type != 'tabs' && data.type != 'report' && data.type != 'inline' && data.type != 'divider' && data.type != 'td' && data.type != 'col'">
        <el-switch v-model="data.options.hideLabel"></el-switch>
      </el-form-item>
      
      <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' && data.type!='date')">
        <el-input v-model="data.options.placeholder" clearable></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.layout')" v-if="Object.keys(data.options).indexOf('inline')>=0">
        <el-radio-group v-model="data.options.inline">
          <el-radio-button :label="false">{{$t('fm.config.widget.block')}}</el-radio-button>
          <el-radio-button :label="true">{{$t('fm.config.widget.inline')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.contentPosition')" v-if="Object.keys(data.options).indexOf('contentPosition') >= 0">
        <el-radio-group v-model="data.options.contentPosition">
          <el-radio-button label="left">{{$t('fm.config.widget.left')}}</el-radio-button>
          <el-radio-button label="center">{{$t('fm.config.widget.center')}}</el-radio-button>
          <el-radio-button label="right">{{$t('fm.config.widget.right')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.showInput')" v-if="Object.keys(data.options).indexOf('showInput')>=0">
        <el-switch v-model="data.options.showInput" ></el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.min')" v-if="Object.keys(data.options).indexOf('min')>=0">
        <el-input-number v-model="data.options.min"  :step="1"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.max')" v-if="Object.keys(data.options).indexOf('max')>=0">
        <el-input-number v-model="data.options.max"  :step="1"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.step')" v-if="Object.keys(data.options).indexOf('step')>=0">
        <el-input-number v-model="data.options.step" :min="-99999" :max="99999" :step="1"></el-input-number>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.precision')" v-if="Object.keys(data.options).indexOf('precision')>=0">
        <el-input-number v-model="data.options.precision" :min="0" :max="99999" :step="1"></el-input-number>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.controls')" v-if="Object.keys(data.options).indexOf('controls')>=0">
        <el-switch v-model="data.options.controls" ></el-switch>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.controlsPosition')" v-if="Object.keys(data.options).indexOf('controlsPosition') >= 0 && data.options.controls">
        <el-radio-group v-model="data.options.controlsPosition">
          <el-radio-button label="">{{$t('fm.config.widget.default')}}</el-radio-button>
          <el-radio-button label="right">{{$t('fm.config.widget.right')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.multiple')" v-if="data.type=='select' || data.type=='imgupload' || data.type == 'fileupload' || data.type == 'cascader'">
        <el-switch v-model="data.options.multiple" @change="handleSelectMuliple"></el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.filterable')" v-if="data.type=='select' || data.type == 'cascader'">
        <el-switch v-model="data.options.filterable"></el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.allowHalf')" v-if="Object.keys(data.options).indexOf('allowHalf')>=0">
        <el-switch
            v-model="data.options.allowHalf"
          >
          </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.showAlpha')" v-if="Object.keys(data.options).indexOf('showAlpha')>=0">
        <el-switch
            v-model="data.options.showAlpha"
          >
          </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.option')" v-if="Object.keys(data.options).indexOf('options')>=0">
        <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
          <el-radio-button :label="false">{{$t('fm.config.widget.staticData')}}</el-radio-button>
          <el-radio-button :label="true">{{$t('fm.config.widget.remoteData')}}</el-radio-button>
        </el-radio-group>
        <template v-if="data.options.remote">
          <div>
            <el-radio-group v-model="data.options.remoteType">
              <el-radio label="datasource">{{$t('fm.datasource.name')}}</el-radio>
              <el-radio label="option">{{$t('fm.config.widget.remoteAssigned')}}</el-radio>
              <el-radio label="func">{{$t('fm.config.widget.remoteFunc')}}</el-radio>
            </el-radio-group>
            <el-input clearable size="mini" v-if="data.options.remoteType == 'option'" v-model="data.options.remoteOption" style="margin-bottom: 5px;">
            </el-input>
            <el-input clearable size="mini" v-if="data.options.remoteType == 'func'" v-model="data.options.remoteFunc" style="margin-bottom: 5px;">
            </el-input>
            <el-select
              size="mini"
              v-if="data.options.remoteType == 'datasource'"
              style="width: 100%;margin-bottom: 5px;"
              v-model="data.options.remoteDataSource">
              <el-option
                v-for="item in datasources"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input clearable size="mini"  v-model="data.options.props.value">
              <div style="width: 30px;" slot="prepend">{{$t('fm.config.widget.value')}}</div>
            </el-input>
            <el-input clearable size="mini" v-model="data.options.props.label">
              <div slot="prepend" style="width: 30px;">{{$t('fm.config.widget.label')}}</div>
            </el-input>
            <el-input clearable size="mini" v-model="data.options.props.children">
              <template slot="prepend">{{$t('fm.config.widget.childrenOption')}}</template>
            </el-input>
          </div>
        </template>
        <template v-else>
          <div v-if="Object.keys(data.options).indexOf('showLabel')>=0">
            <el-checkbox size="mini" v-model="data.options.showLabel">{{$t('fm.config.widget.showLabel')}}</el-checkbox>
          </div>
          <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
            <el-radio-group v-model="data.options.defaultValue">
              <draggable tag="ul" :list="data.options.options" 
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index" >
                  <el-radio
                    :label="item.value" 
                    style="margin-right: 5px;"
                  >
                    <el-input clearable :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
                    <el-input clearable style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
                    <!-- <input v-model="item.value"/> -->
                  </el-radio>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                  
                </li>
              </draggable>
              
            </el-radio-group>
          </template>

          <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
            <el-checkbox-group v-model="data.options.defaultValue">

              <draggable tag="ul" :list="data.options.options" 
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index" >
                  <el-checkbox
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input clearable :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
                    <el-input clearable style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
                  </el-checkbox>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                  
                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <div style="margin-left: 22px;" v-if="data.type != 'cascader'">
            <el-button type="text" @click="handleAddOption">{{$t('fm.actions.addOption')}}</el-button>
            <el-button type="text" @click="handleClearSelect">{{$t('fm.actions.clearSelect')}}</el-button>
          </div>
          <template v-if="data.type == 'cascader'">
            <!-- <code-editor :key="data.key" mode="javascript" v-model="data.options.options" height="200px"></code-editor> -->
            <el-button style="width: 100%;" @click="handleSetCascader">{{$t('fm.config.widget.setting')}}</el-button>
          </template>
        </template>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.buttonSize')" v-if="Object.keys(data.options).indexOf('buttonSize')>=0">
        <el-radio-group v-model="data.options.buttonSize">
          <el-radio-button label="large">Large</el-radio-button>
          <el-radio-button label="medium">Medium</el-radio-button>
          <el-radio-button label="small">Small</el-radio-button>
          <el-radio-button label="mini">Mini</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.buttonType')" v-if="Object.keys(data.options).indexOf('buttonType')>=0">
        <el-select v-model="data.options.buttonType" style="width: 100%;">
          <el-option value="" label="Default"></el-option>
          <el-option value="primary" label="Primary"></el-option>
          <el-option value="success" label="Success"></el-option>
          <el-option value="warning" label="Warning"></el-option>
          <el-option value="danger" label="Danger"></el-option>
          <el-option value="info" label="Info"></el-option>
          <el-option value="text" label="Text"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.linkType')" v-if="Object.keys(data.options).indexOf('linkType')>=0">
        <el-select v-model="data.options.linkType" style="width: 100%;">
          <el-option value="default" label="Default"></el-option>
          <el-option value="primary" label="Primary"></el-option>
          <el-option value="success" label="Success"></el-option>
          <el-option value="warning" label="Warning"></el-option>
          <el-option value="danger" label="Danger"></el-option>
          <el-option value="info" label="Info"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.buttonPlain')" v-if="Object.keys(data.options).indexOf('buttonPlain')>=0">
        <el-switch
            v-model="data.options.buttonPlain"
          >
          </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.buttonRound')" v-if="Object.keys(data.options).indexOf('buttonRound')>=0">
        <el-switch
            v-model="data.options.buttonRound"
          >
          </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.buttonCircle')" v-if="Object.keys(data.options).indexOf('buttonCircle')>=0">
        <el-switch
            v-model="data.options.buttonCircle"
          >
          </el-switch>
      </el-form-item>
      <el-form-item :label="'href'" v-if="Object.keys(data.options).indexOf('href')>=0">
        <el-input clearable v-model="data.options.href"></el-input>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.underline')" v-if="Object.keys(data.options).indexOf('underline')>=0">
        <el-switch
            v-model="data.options.underline"
          >
          </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.isBlank')" v-if="Object.keys(data.options).indexOf('blank')>=0">
        <el-switch
            v-model="data.options.blank"
          >
          </el-switch>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.paging')" v-if="Object.keys(data.options).indexOf('paging')>=0">
        <el-switch
            v-model="data.options.paging"
          >
          </el-switch>
      </el-form-item>
      <el-form-item :label="$t('fm.config.widget.pageSize')" v-if="data.options.paging && Object.keys(data.options).indexOf('pageSize')>=0">
        <el-input-number
          v-model="data.options.pageSize"
          :step="5"
          :min="1"
        ></el-input-number>
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.defaultValue')" 
        v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && data.type != 'custom'
          && data.type != 'imgupload'
          && data.type != 'fileupload'
          && data.type != 'radio'
          && data.type != 'checkbox'
          && data.type != 'select'
          && data.type != 'date'
          && data.type != 'time'"
        >
        <el-input clearable v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></el-input>
        
        <template v-if="data.type=='input' || data.type == 'text'">
          <template v-if="data.options.dataType == 'number' || data.options.dataType == 'integer' || data.options.dataType == 'float'">
            <el-input clearable type="number" v-model.number="data.options.defaultValue"></el-input>
          </template>
          <template v-else>
            <el-input clearable v-model="data.options.defaultValue"></el-input>
          </template>
        </template>
        
        <el-rate v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"></el-rate>
        <el-button type="text" v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{$t('fm.actions.clear')}}</el-button>
        <el-color-picker 
          v-if="data.type == 'color'"
          v-model="data.options.defaultValue"
          :show-alpha="data.options.showAlpha"
        ></el-color-picker>
        <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue"></el-switch>
        <el-input-number v-if="data.type=='number'"
          v-model="data.options.defaultValue"
          :step="data.options.step"
          :min="data.options.min"
          :max="data.options.max"
        ></el-input-number>

        <template v-if="data.type == 'html'">
          <code-editor :key="data.key" v-model="data.options.defaultValue" height="200px"></code-editor>
        </template>

        <template v-if="data.type == 'cascader'">
          <el-cascader
            v-model="data.options.defaultValue"
            clearable
            :options="data.options.remote ? [] : data.options.options"
            style="width: 100%"
          >
          </el-cascader>
        </template>

        <template v-if="data.type == 'editor'">
          <el-button style="width: 100%;" @click="editorVisible = true">{{$t('fm.config.widget.setting')}}</el-button>
          <cus-dialog 
            :visible="editorVisible"
            @on-close="editorVisible = false"
            :width="`calc(${data.options.width || '900px'} + 40px)`"
            form
            :action="false"
            :title="$t('fm.config.widget.defaultValue')"
            close-on-click-modal
          >
            <fm-editor
              v-model="data.options.defaultValue"
              :toolbar="data.options.customToolbar"
              :sty="{width: data.options.width}"
            >
            </fm-editor>
          </cus-dialog>
        </template>

        <template v-if="data.type == 'table'">
          <el-button style="width: 100%;" @click="tableVisible = true">{{$t('fm.config.widget.setting')}}</el-button>
          <cus-dialog 
            :visible="tableVisible"
            @on-close="tableVisible = false"
            :width="`calc(${data.options.width || '900px'} + 40px)`"
            form
            :action="false"
            :title="$t('fm.config.widget.defaultValue')"
            close-on-click-modal
          >
            <fm-form-table
              :value="data.options.defaultValue"
              :columns="data.tableColumns"
              :name="data.model"
              :rules="[]"
              :paging="data.options.paging"
              :page-size="data.options.pageSize"
            >
            </fm-form-table>
          </cus-dialog>
        </template>
      </el-form-item>

      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item :label="$t('fm.config.widget.showType')" v-if="data.type == 'date'">
          <el-select v-model="data.options.type">
            <el-option value="year"></el-option>
            <el-option value="month"></el-option>
            <el-option value="date"></el-option>
            <el-option value="dates"></el-option>
            <!-- <el-option value="week"></el-option> -->
            <el-option value="datetime"></el-option>
            <el-option value="datetimerange"></el-option>
            <el-option value="daterange"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isRange')" v-if="data.type == 'time'">
          <el-switch
            v-model="data.options.isRange"
          >
          </el-switch>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isTimestamp')" v-if="data.type == 'date'">
          <el-switch
            v-model="data.options.timestamp"
          >
          </el-switch>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')">
          <el-input clearable v-model="data.options.placeholder"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.startPlaceholder')" v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'">
          <el-input clearable v-model="data.options.startPlaceholder"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.endPlaceholder')" v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'">
          <el-input clearable v-model="data.options.endPlaceholder"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.format')">
          <el-input clearable v-model="data.options.format"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0">
          <el-time-picker 
            key="1"
            style="width: 100%;"
            v-if="!data.options.isRange"
            v-model="data.options.defaultValue"
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          >
          </el-time-picker>
          <el-time-picker 
            key="2"
            v-if="data.options.isRange"
            style="width: 100%;"
            v-model="data.options.defaultValue"
            is-range
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="data.type=='date'">
          <el-date-picker
            key="1"
            v-model="data.options.defaultValue"
            :type="data.options.type"
            :clearable="true"
            :value-format="data.options.timestamp ? 'timestamp' : data.options.format"
            :format="data.options.format"
            style="width: 100%"
            v-if="data.options.type == 'datetimerange' || data.options.type == 'daterange'"
          >
          </el-date-picker>
          <el-date-picker
            key="2"
            v-model="data.options.defaultValue"
            :type="data.options.type"
            :clearable="true"
            :value-format="data.options.timestamp ? 'timestamp' : data.options.format"
            :format="data.options.format"
            style="width: 100%"
            v-else
          >
          </el-date-picker>
        </el-form-item>
      </template>

      <template v-if="data.type=='imgupload' || data.type=='fileupload'">
        
        <el-form-item :label="$t('fm.config.widget.limit')">
          <el-input clearable type="number" v-model.number="data.options.limit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tip')" v-if="Object.keys(data.options).indexOf('tip')>=0">
          <el-input clearable v-model="data.options.tip"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isQiniu')">
          <el-switch v-model="data.options.isQiniu"></el-switch>
        </el-form-item>
        <template v-if="data.options.isQiniu">
          <el-form-item label="Domain" :required="true">
          <el-input clearable v-model="data.options.domain"></el-input>
          </el-form-item>
          <el-form-item :label="$t('fm.config.widget.tokenFunc')" :required="true">
            <!-- <el-input clearable v-model="data.options.tokenFunc"></el-input> -->
            <el-radio-group v-model="data.options.tokenType">
              <el-radio label="datasource">{{$t('fm.datasource.name')}}</el-radio>
              <el-radio label="func">{{$t('fm.config.widget.remoteFunc')}}</el-radio>
            </el-radio-group>
            <el-input clearable v-if="data.options.tokenType == 'func'" v-model="data.options.tokenFunc">
            </el-input>
            <el-select
              v-if="data.options.tokenType == 'datasource'"
              style="width: 100%;"
              v-model="data.options.tokenDataSource">
              <el-option
                v-for="item in datasources"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item :label="$t('fm.config.widget.action')" :required="true">
            <el-input clearable v-model="data.options.action"></el-input>
          </el-form-item>
          <el-form-item :label="$t('fm.config.widget.headers')">
            <ul>
              <li v-for="(item, index) in data.options.headers" :key="index" style="margin-bottom: 5px;">
                <el-input type="textarea" clearable :rows="1" placeholder="KEY" size="mini" style="width: 100px;margin-right:5px;" v-model="item.key"></el-input>

                <el-input type="textarea" clearable :rows="1" placeholder="VALUE" size="mini" style="width: 130px;" v-model="item.value"></el-input>
                
                <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                
              </li>
            </ul>
          <div>
            <el-button type="text" @click="handleAddHeader">{{$t('fm.actions.add')}}</el-button>
          </div>
          </el-form-item>

          <el-form-item :label="$t('fm.config.widget.withCredentials')">
            <el-switch v-model="data.options.withCredentials"></el-switch>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type=='blank'">
        <el-form-item :label="$t('fm.config.widget.defaultType')">
          <el-select v-model="data.options.defaultType">
            <el-option value="String" :label="$t('fm.config.widget.string')"></el-option>
            <el-option value="Object" :label="$t('fm.config.widget.object')"></el-option>
            <el-option value="Array" :label="$t('fm.config.widget.array')"></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'component'">
        <el-form-item :label="$t('fm.config.widget.customTemplates')">
          <!-- <code-editor :key="data.key" mode="html" v-model="data.options.template" height="200px"></code-editor> -->
          <el-button style="width: 100%;" @click="handleSetTemplate">{{$t('fm.config.widget.setting')}}</el-button>
        </el-form-item>
      </template>

      <template v-if="data.type == 'grid'">
        <el-form-item :label="$t('fm.config.widget.gutter')">
          <el-input clearable type="number" v-model.number="data.options.gutter"></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.flex')">
          <el-switch v-model="data.options.flex"></el-switch>
        </el-form-item>
        <!-- responsive -->
        <!-- <el-form-item :label="$t('fm.config.widget.responsive')">
          <el-switch v-model="data.options.responsive"></el-switch>
        </el-form-item> -->
        <el-form-item :label="$t('fm.config.widget.justify')" v-if="data.options.flex">
          <el-select v-model="data.options.justify">
            <el-option value="start" :label="$t('fm.config.widget.justifyStart')"></el-option>
            <el-option value="end" :label="$t('fm.config.widget.justifyEnd')"></el-option>
            <el-option value="center" :label="$t('fm.config.widget.justifyCenter')"></el-option>
            <el-option value="space-around" :label="$t('fm.config.widget.justifySpaceAround')"></el-option>
            <el-option value="space-between" :label="$t('fm.config.widget.justifySpaceBetween')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.align')" v-if="data.options.flex">
          <el-select v-model="data.options.align">
            <el-option value="top" :label="$t('fm.config.widget.alignTop')"></el-option>
            <el-option value="middle" :label="$t('fm.config.widget.alignMiddle')"></el-option>
            <el-option value="bottom" :label="$t('fm.config.widget.alignBottom')"></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'col'">
        <el-form-item :label="$t('fm.config.widget.span')">
          <el-input-number v-model="data.options.md"  :step="1" :min="1" :max="24" v-if="platform == 'pc'"></el-input-number>
          <el-input-number v-model="data.options.sm"  :step="1" :min="1" :max="24" v-if="platform == 'pad'"></el-input-number>
          <el-input-number v-model="data.options.xs"  :step="1" :min="1" :max="24" v-if="platform == 'mobile'"></el-input-number>
        </el-form-item>
        <!-- <el-form-item :label="$t('fm.config.widget.responsiveSpan')">
          <div>
            <span style="width: 25px; display: inline-block;">xs: </span>
            <el-input-number v-model="data.options.xs"  :step="1" :min="1" :max="24" size="mini"></el-input-number>
            <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'<768px'"></pre>
          </div>
          <div>
            <span style="width: 25px; display: inline-block;">sm: </span>
            <el-input-number v-model="data.options.sm"  :step="1" :min="1" :max="24" size="mini"></el-input-number>
            <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥768px'"></pre>
          </div>
          <div>
            <span style="width: 25px; display: inline-block;">md: </span>
            <el-input-number v-model="data.options.md"  :step="1" :min="1" :max="24" size="mini"></el-input-number>
            <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥992px'"></pre>
          </div>
          <div>
            <span style="width: 25px; display: inline-block;">lg: </span>
            <el-input-number v-model="data.options.lg"  :step="1" :min="1" :max="24" size="mini"></el-input-number>
            <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥1200px'"></pre>
          </div>
          <div>
            <span style="width: 25px; display: inline-block;">xl: </span>
            <el-input-number v-model="data.options.xl"  :step="1" :min="1" :max="24" size="mini"></el-input-number>
            <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥1920px'"></pre>
          </div>
        </el-form-item> -->
        <el-form-item :label="$t('fm.config.widget.offset')">
          <el-input-number v-model="data.options.offset"  :step="1" :min="0" :max="24"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.push')">
          <el-input-number v-model="data.options.push"  :step="1" :min="0" :max="24"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.pull')">
          <el-input-number v-model="data.options.pull"  :step="1" :min="0" :max="24"></el-input-number>
        </el-form-item>
      </template>

      <template v-if="data.type == 'tabs'">
        <el-form-item :label="$t('fm.config.widget.type')">
          <el-radio-group v-model="data.options.type">
            <el-radio-button label="">{{$t('fm.config.widget.default')}}</el-radio-button>
            <el-radio-button label="card">{{$t('fm.config.widget.card')}}</el-radio-button>
            <el-radio-button label="border-card">{{$t('fm.config.widget.borderCard')}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tabPosition')">
          <el-radio-group v-model="data.options.tabPosition">
            <el-radio-button label="top">{{$t('fm.config.widget.top')}}</el-radio-button>
            <el-radio-button label="left">{{$t('fm.config.widget.left')}}</el-radio-button>
            <el-radio-button label="right">{{$t('fm.config.widget.right')}}</el-radio-button>
            <el-radio-button label="bottom">{{$t('fm.config.widget.bottom')}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tabOption')">
          <draggable tag="ul" :list="data.tabs" 
            v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.tabs" :key="index" >
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
              <el-input  clearable :placeholder="$t('fm.config.widget.tabName')" size="mini" style="width: 200px;" v-model="item.label"></el-input>
              
              <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
              
            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddTab">{{$t('fm.actions.addTab')}}</el-button>
          </div>
        </el-form-item>
      </template>

      <template v-if="data.type == 'report'">
        <el-form-item :label="$t('fm.config.widget.borderWidth')">
          <el-input-number v-model="data.options.borderWidth" :min="0" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.borderColor')">
          <el-color-picker 
            v-model="data.options.borderColor"
          ></el-color-picker>
        </el-form-item>
      </template>

      <el-form-item :label="$t('fm.config.widget.customClass')" v-if="Object.keys(data.options).includes('customClass') && !data.options.tableColumn">
        <!-- <el-input v-model="data.options.customClass" clearable></el-input> -->
        <el-select
          style="width: 100%;"
          v-model="customClassArray"
          multiple
          filterable
          allow-create
          default-first-option>
          <el-option
            v-for="item in sheets"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item :label="$t('fm.config.widget.attribute')">
        <el-checkbox v-model="data.options.dataBind" v-if="Object.keys(data.options).indexOf('dataBind')>=0 && !data.options.tableColumn" :disabled="data.type != 'blank' && data.type != 'component'">{{$t('fm.config.widget.dataBind')}}	</el-checkbox>
        <el-checkbox v-model="data.options.hidden" v-if="Object.keys(data.options).indexOf('hidden')>=0">{{$t('fm.config.widget.hidden')}}	</el-checkbox>
        <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">{{$t('fm.config.widget.readonly')}} </el-checkbox>
        <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">{{$t('fm.config.widget.disabled')}}	</el-checkbox>
        <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">{{$t('fm.config.widget.editable')}} </el-checkbox>
        <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">{{$t('fm.config.widget.clearable')}} </el-checkbox>
        <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">{{$t('fm.config.widget.arrowControl')}} </el-checkbox>
        <el-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete')>=0">{{$t('fm.config.widget.isDelete')}} </el-checkbox>
        <el-checkbox v-model="data.options.isEdit" v-if="Object.keys(data.options).indexOf('isEdit')>=0">{{$t('fm.config.widget.isEdit')}} </el-checkbox>
        <el-checkbox v-model="data.options.showPassword" v-if="Object.keys(data.options).indexOf('showPassword')>=0">{{$t('fm.config.widget.showPassword')}} </el-checkbox>
        <el-checkbox v-model="data.options.showScore" v-if="Object.keys(data.options).indexOf('showScore')>=0">{{$t('fm.config.widget.showScore')}} </el-checkbox>
        
      </el-form-item>

      <template v-if="data.type != 'grid' && data.type != 'tabs' && data.type != 'report' && data.type != 'inline' && data.type != 'divider' && data.type != 'td' && data.type != 'col' && data.type != 'button' && data.type != 'link'">
        
        <el-form-item :label="$t('fm.config.widget.validate')">
          <div class="validate-block" v-if="Object.keys(data.options).indexOf('required')>=0">
            <el-checkbox v-model="data.options.required">{{$t('fm.config.widget.required')}}</el-checkbox>

            <el-input size="mini" class="message-input" clearable  v-model="data.options.requiredMessage" v-if="data.options.required"  :placeholder="$t('fm.message.errorTip')"></el-input>
          </div>
          <div class="validate-block" v-if="Object.keys(data.options).indexOf('dataType')>=0">
            <el-checkbox v-model="data.options.dataTypeCheck" style="margin-right: 10px;"></el-checkbox>
            <el-select :disabled="!data.options.dataTypeCheck" v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
              <el-option value="string" :label="$t('fm.config.widget.string')"></el-option>
              <el-option value="number" :label="$t('fm.config.widget.number')"></el-option>
              <el-option value="integer" :label="$t('fm.config.widget.integer')"></el-option>
              <el-option value="float" :label="$t('fm.config.widget.float')"></el-option>
              <el-option value="url" :label="$t('fm.config.widget.url')"></el-option>
              <el-option value="email" :label="$t('fm.config.widget.email')"></el-option>
              <el-option value="hex" :label="$t('fm.config.widget.hex')"></el-option>
            </el-select>

            <el-input size="mini" class="message-input" clearable  v-model="data.options.dataTypeMessage" v-if="data.options.dataTypeCheck"  :placeholder="$t('fm.message.errorTip')"></el-input>
          </div>
          
          <div class="validate-block" v-if="Object.keys(data.options).indexOf('pattern')>=0">
            <el-checkbox v-model="data.options.patternCheck" style="margin-right: 10px;"></el-checkbox>
            <el-input clearable :disabled="!data.options.patternCheck" size="mini" v-model.lazy="data.options.pattern"  style=" width: 239px;" :placeholder="$t('fm.config.widget.patternPlaceholder')"></el-input>
            <el-input size="mini" class="message-input" clearable  v-model="data.options.patternMessage" v-if="data.options.patternCheck"  :placeholder="$t('fm.message.errorTip')"></el-input>
          </div>

          <div class="validate-block" v-if="Object.keys(data.options).indexOf('validator')>=0">
            <el-checkbox v-model="data.options.validatorCheck" style="margin-right: 10px;">{{$t('fm.config.widget.customValidation')}}</el-checkbox>

            <div v-if="data.options.validatorCheck">
              <div style="font-size: 14px;color: blue;font-weight: 500;">(rule, value, callback) => {</div>
              <code-editor mode="javascript" :key="data.key" v-model="data.options.validator" height="150px"></code-editor>
              <div style="font-size: 14px;color: blue;font-weight: 500;">}</div>
            </div>

          </div>
        </el-form-item>
      </template>

      <template v-if="data.events ">
        <el-form-item :label="$t('fm.eventscript.config.title')">
          <event-config :events="data.events" :eventscripts="eventscripts" @on-add="handleEventAdd" @on-edit="handleEventEdit"></event-config>
        </el-form-item>
      </template>
    </el-form>

    <code-dialog ref="codeDialog" mode="html" :title="$t('fm.config.widget.customTemplates')" help="https://www.yuque.com/ln7ccx/ntgo8q/zr53m4" @on-confirm="handleTemplateConfirm"></code-dialog>

    <code-dialog ref="cascaderDialog" width="800px" code-height="400px" mode="javascript" :title="$t('fm.config.widget.option')"  @on-confirm="handleCascaderConfirm"></code-dialog>
  </div>
  <div v-else class="empty">
    {{$t('fm.description.configEmpty')}}
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import CodeEditor from '../components/CodeEditor'
import CodeDialog from './CodeDialog'
import FmEditor from './Editor'
import CusDialog from './CusDialog'
import FmFormTable from './FormTable'
import EventConfig from './EventPanel/config'

export default {
  components: {
    Draggable,
    CodeEditor,
    CodeDialog,
    FmEditor,
    CusDialog,
    FmFormTable,
    EventConfig
  },
  props: ['data', 'sheets', 'platform', 'datasources', 'eventscripts'],
  data () {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null,
        validator: null
      },
      editorVisible: false,
      tableVisible: false,
      customClassArray: this.data && this.data.options && this.data.options.customClass ? this.data.options.customClass.split(' ').filter(item => item) : []
    }
  },
  computed: {
    show () {
      if (this.data && Object.keys(this.data).length > 0 && this.data.key && this.data.options) {
        return true
      }
      return false
    }
  },
  created () {
    this.validateRequired(this.data && this.data.options ? this.data.options.required : false)
    this.validateDataType(this.data && this.data.options ? this.data.options.dataType : '')
    this.valiatePattern(this.data && this.data.options ? this.data.options.pattern : '')
    this.validateCustom(this.data && this.data.options ? this.data.options.validator: '')
  },
  methods: {
    handleOptionsRemove (index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else if (this.data.type === 'tabs') {
        this.data.tabs.splice(index, 1)
      } else if (this.data.type === 'imgupload' || this.data.type === 'fileupload') {
        this.data.options.headers.splice(index, 1)
      } else {
        if (!this.data.options.remote && this.data.options.options[index].value) {
          this.data.options.defaultValue = typeof this.data.options.defaultValue === 'string' ? '' : []
        }

        this.data.options.options.splice(index, 1)
      }
      
    },
    handleClearSelect () {
      if (this.data.type=='checkbox' || (this.data.type=='select' && this.data.options.multiple)) {
        this.data.options.defaultValue = []
      } else {
        this.data.options.defaultValue = ''
      }
    },
    handleAddOption () {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption'),
          label: this.$t('fm.config.widget.newOption')
        })
      } else {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption')
        })
      }
      
    },
    handleAddColumn () {
      this.data.columns.push({
        span: '',
        list: []
      })
    },
    handleAddTab () {
      let length = this.data.tabs.length

      this.data.tabs.push({
        label: this.$t('fm.config.widget.tab') + (length + 1),
        name: 'tab_' + Math.random().toString(36).slice(-8),
        list: []
      })
    },
    handleAddHeader () {
      if ('headers' in this.data.options) {
        this.data.options.headers.push({
          key: '',
          value: ''
        })
      } else {

        this.$set(this.data.options, 'headers', [{key: '', value: ''}])
      }
      
    },
    generateRule () {
      if (this.data) {
        this.data.rules = []
        Object.keys(this.validator).forEach(key => {
          if (this.validator[key]) {
            this.data.rules.push(this.validator[key])
          }
        })
      }
    },
    handleSelectMuliple (value) {
      if (this.data.type == 'select') {
        if (value) {
          if (this.data.options.defaultValue) {
            this.data.options.defaultValue = [this.data.options.defaultValue]
          } else {
            this.data.options.defaultValue = []
          }
          
        } else {
          if (this.data.options.defaultValue.length>0){
            this.data.options.defaultValue = this.data.options.defaultValue[0]
          } else {
            this.data.options.defaultValue = ''
          }     
        }
      }
    },

    handleSetTemplate () {
      this.$refs.codeDialog.open(this.data.options.template)
    },

    handleTemplateConfirm (value) {

      this.data.options.template = value

      this.$refs.codeDialog.close()
    },

    handleSetCascader () {
      this.$refs.cascaderDialog.open(this.data.options.options)
    },

    handleCascaderConfirm (value) {
      if (typeof value == 'string') {
        this.data.options.options =  Function('"use strict";return (' + value + ')')()
      } else {
        this.data.options.options =  value
      }

      this.$refs.cascaderDialog.close()
    },

    validateRequired (val) {
      if (val) {
        this.validator.required = {required: true, message: this.data.options.requiredMessage ? this.data.options.requiredMessage : `${this.$t('fm.config.widget.validatorRequired')}`}
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType (val) {
      if (!this.show) {
        return false
      }
      
      if (val && (this.data.options.dataTypeCheck || !Object.keys(this.data.options).includes('dataTypeCheck'))) {
        this.validator.type = {type: val, message: this.data.options.dataTypeMessage ? this.data.options.dataTypeMessage : this.$t('fm.config.widget.validatorType')}
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern (val) {
      if (!this.show) {
        return false
      }

      if (val && (this.data.options.patternCheck || !Object.keys(this.data.options).includes('patternCheck'))) {
        this.validator.pattern = {pattern: val, message: this.data.options.patternMessage ? this.data.options.patternMessage : this.$t('fm.config.widget.validatorPattern')}
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    },

    validateCustom (val) {
      if (!this.show) {
        return false
      }

      if (val && this.data.options.validatorCheck) {
        this.validator.validator = {func: val}
      } else {
        this.validator.validator = null
      }

      this.generateRule()
    },

    handleEventAdd (name) {
      this.$emit('on-event-add', name)
    },

    handleEventEdit ({eventName, functionKey}) {
      this.$emit('on-event-edit', {eventName, functionKey})
    },

    setEvent (eventObj) {
      this.$set(this.data.events, eventObj.type, eventObj.key)
    }
  },
  watch: {
    'data.options.isRange': function(val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue')>=0) 
            this.data.options.defaultValue = ''
        }
      }
    },
    'data.options.type': function(val) {
      if (this.data.type == 'date') {
        if (val == 'daterange' || val == 'datetimerange' || val == 'dates') {
          this.data.options.defaultValue = []
        } else {
          this.data.options.defaultValue = ''
        }
      }
    },
    'data.options.required': function(val) {
      this.validateRequired(val)
    },
    'data.options.requiredMessage':function (val) {
      this.validateRequired(this.data && this.data.options ? this.data.options.required : false)
    },
    'data.options.dataType': function (val) {
      this.validateDataType(val)
    },
    'data.options.dataTypeCheck': function (val) {
      this.validateDataType(this.data && this.data.options ? this.data.options.dataType : '')
    },
    'data.options.dataTypeMessage': function (val) {
      this.validateDataType(this.data && this.data.options ? this.data.options.dataType : '')
    },
    'data.options.pattern': function (val) {
      this.valiatePattern(val)
    },
    'data.options.patternCheck': function (val) {
      this.valiatePattern(this.data && this.data.options ? this.data.options.pattern : '')
    },
    'data.options.patternMessage': function (val) {
      this.valiatePattern(this.data && this.data.options ? this.data.options.pattern : '')
    },
    'data.options.validator': function (val) {
      this.validateCustom(val)
    },
    'data.options.validatorCheck': function (val) {
      this.validateCustom(this.data && this.data.options ? this.data.options.validator : '')
    },
    'data.options.options': {
      deep: true,
      handler (val) {
        if (this.data.options && typeof this.data.options.defaultValue == 'object' && Array.isArray(this.data.options.defaultValue)) {
          this.data.options.defaultValue = this.data.options.defaultValue.filter(item => val.map(item => item.value).includes(item))
        }
        if (this.data.options && typeof this.data.options.defaultValue == 'string') {

          if (typeof val == 'object' && !val.map(item => item.value).includes(this.data.options.defaultValue)) {
            this.data.options.defaultValue = ''
          }
        }
      }
    },
    'data.options.customClass': function(val) {
      this.customClassArray = this.data && this.data.options && this.data.options.customClass ? this.data.options.customClass.split(' ').filter(item => item) : []
    },
    customClassArray (val) {
      this.data.options.customClass = val.join(' ')
    }
  }
}
</script>
